<!DOCTYPE html>
<html>
<head>
    <title>Drag Polygon Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>
    <script type="text/paperscript" canvas="paper-container">
        // 引入Paper.js
        paper.install(window);
         
         // 设置Paper.js项目
         paper.setup('paper-container');
          
         // 创建一个多边形路径
         let path = new paper.Path({
             segments: [[50, 50], [150, 50], [150, 150], [50, 150]],
             fillColor: 'blue'
         });
          
         // 记录当前鼠标的位置
         let mouseDown = false;
         let offset = null;
          
         // 鼠标按下事件
         function onMouseDown(event) {
             mouseDown = true;
             offset = event.point.subtract(path.position);
         }
          
         // 鼠标移动事件
         function onMouseMove(event) {
             if (mouseDown) {
                 path.position = event.point.subtract(offset);
             }
         }
          
         // 鼠标抬起事件
         function onMouseUp(event) {
             mouseDown = false;
         }
          
         // 添加事件监听
         paper.view.onMouseDown = onMouseDown;
         paper.view.onMouseMove = onMouseMove;
         paper.view.onMouseUp = onMouseUp;
    </script>
</head>
<body>
    <canvas id="paper-container"></canvas>
</body>
</html>

